<template>
    <div>
        <div v-if='engine==0'>
            <Engine @openEngine='openEngine'></Engine> 
        </div>
        <div style='background: #fff' v-else>
            <div class='content-title'>计划任务</div>
            <div style='padding:35px 20px'>
                <button class='btn btn-hover' @click='addTask'>创建任务</button>
                <div style="padding:1px">
                    <Table :columns="scheduleList" :data="scheduleData" stripe></Table>
                </div>
                <div style='overflow: hidden'>
                    <Page :total="pagination.rowCount" :page-size='pagination.pageSize' style='float: right;margin: 20px 0;' @on-change='changePage'></Page>
                </div>
            </div>
            <!-- 创建任务 -->
            <Modal v-model="modal" width="600">
                <p slot="header">
                    <span>创建计划任务</span>
                </p>
                <div style='margin-bottom: 24px'>
                     <Form :label-width='60' label-position='left'>
                        <FormItem label='分组'>
                            <p slot='label'><span class='star'>*</span>分组</p>
                            <Select v-model='formItem.classId' @on-change='selectFun'>
                                <Option v-for="item in configData" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                        <!-- <FormItem label='名称'>
                            <p slot='label'><span class='star'>*</span>名称</p>
                            <Input v-model='formItem.name' placeholder='请输入名称'></Input>
                        </FormItem> -->
                        <FormItem label='函数'>
                            <p slot='label'><span class='star'>*</span>函数</p>
                            <Select v-model='formItem.functionId'>
                                <Option v-for="item in funData" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                        
                    </Form>
                    <RadioGroup v-model='type'>
                        <Radio label="0">Cron表达式</Radio>
                        <!-- <Radio label="1">日期</Radio> -->
                    </RadioGroup>
                    <Input v-model='formItem.rule' style='margin-top: 30px' placeholder='请填写表达式,例如0 10 * * *每天早上10点整执行' v-show='type==0'></Input>
                    
                    <Row v-show='type==1' style='margin-top: 30px'>
                       <!--  <Col span='4'>
                            <Select v-model="date.second">
                                <Option value='*'>请选择</Option>
                                <Option v-for="(item,index) in second" :value="index+1" :key="item.name">{{ item.name }}</Option>
                            </Select>
                        </Col> -->
                        <Col span='4'>
                            <Select v-model="date.minute">
                                <Option value='*'>请选择</Option>
                                <Option v-for="(item,index) in minute" :value="index+1" :key="item.name">{{ item.name }}</Option>
                            </Select>
                        </Col>
                        <Col span='4' offset='1'>
                            <Select v-model="date.hour">
                                <Option value='*'>请选择</Option>
                                <Option v-for="(item,index) in hour" :value="index+1" :key="item.name">{{ item.name }}</Option>
                            </Select>
                        </Col>
                        <Col span='4' offset='1'>
                            <Select v-model="date.day">
                                <Option value='*'>请选择</Option>
                                <Option v-for="(item,index) in day" :value="index+1" :key="index">{{ item.name }}</Option>
                            </Select>
                        </Col>
                        <Col span='4' offset='1'>
                            <Select v-model="date.month">
                                <Option value='*'>请选择</Option>
                                <Option v-for="(item,index) in month" :value="index+1" :key="item.name">{{ item.name }}</Option>
                            </Select>
                        </Col>
                        <Col span='4' offset='1'>
                            <Select v-model="date.week">
                                <Option value='*'>请选择</Option>
                                <Option v-for="(item,index) in week" :value="index+1" :key="item.name">{{ item.name }}</Option>
                            </Select>
                        </Col>
                    </Row>
                </div>
                <div slot="footer">
                    <button class='btn-cancel' @click="cancel">取消</button>
                    <button class='btn-sure' @click="sure">确认</button>
                </div>
            </Modal>
        </div>
    </div>
</template>
<script type="text/javascript">
    import axios from 'axios'
    import Engine from './engine.vue'
	export default{
        components:{
            Engine
        },
		data(){
			return{
                engine:1,
				modal:false,
				scheduleList: [
                    // {
                    //     title: '名称',
                    //     key: 'name'
                    // },
                    {
                        title: '分组',
                        key: 'class_name',
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.class.name)
                            ]);
                        }
                    },
                    {
                        title: '函数名称',
                        key: 'func_name',
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.function.name)
                            ]);
                        }
                    },
                    {
                        title: '执行时间',
                        key: 'rule'
                    },
                    {
                        title: '状态',
                        key: 'status',
                        render:(h,params)=>{
                            let styleObj = {
                                    padding:'5px',
                                    borderRadius:'6px'
                                }
                            if(params.row.status==0){
                                styleObj.background = '#eee';
                            }else{
                                styleObj.background = '#09D89E';
                                styleObj.color = '#fff';
                            }
                            return h('div',[
                                    h('span',{
                                        style:styleObj
                                    },params.row.status==0?'关闭':'开启')
                                ])
                        }
                    },
                    {
                        title: '最后修改',
                        key: 'updated_at',
                        render: (h, params) => {
                            return h('div', [
                                h('span', this.format(params.row.updated_at))
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer',
                                        marginRight:'8px'
                                    },
                                    on: {
                                        click: () => {
                                            this.changeStatus(params.row)
                                        }
                                    }
                                }, params.row.status?'关闭':'开启'),
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer',
                                        marginRight:'8px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row)
                                        }
                                    }
                                }, '编辑'),
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.del(params.row)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                scheduleData: [],
                pagination:{},
                currentPage:1,
                formItem:{
                    classId:'',
                    name:'',
                    functionId:0,
                    rule:'',
                },
                type:'0',
                date:{
                    month:'*',
                    week:'*',
                    hour:'*',
                    minute:'*',
                    second:'*',
                    day:'*'
                },
                month:[],
                week:[],
                weekChange:['一','二','三','四','五','六','日'],
                hour:[],
                minute:[],
                second:[],
                day:[],
                configData:[],
                funData:[]
			}
		},
        created(){
            this.$bus.emit('updateMainMenuActive',this.$route.fullPath);
            //获取配置信息
            this.fetch('/home/app/auth/class').then(res=>{
                if(res&&res.data.data&&res.data.code){
                    this.configData = res.data.data;
                }
            })
            
            this.getData();
            for(let i = 1; i <= 31; i++){
                this.day.push({name:i+'日'})
            }
            for(let i = 1; i <= 12; i++){
                this.month.push({name:i+'月'})
            }
            for(let i = 0; i < 7; i++){
                this.week.push({name:'周'+this.weekChange[i]})
            }
            for(let i = 1; i < 24; i++){
                this.hour.push({name:i+'时'})
            }
            for(let i = 1; i < 60; i++){
                this.minute.push({name:i+'分'})
            }
            for(let i = 1; i < 60; i++){
                this.second.push({name:i+'秒'})
            }
        },
		methods:{
             getData(){
                this.fetch('/home/app/engine/schedule/page/'+this.currentPage).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.scheduleData = res.data.data.data;
                        this.pagination = res.data.data.pagination;
                        this.engine = res.data.data.engine;
                    }else{
                        this.scheduleData = [];
                        this.pagination = {};
                        this.engine = 0;

                    }
                })
            },
            changePage(page){
                this.currentPage = page;
                this.getData();
            },
            //开通云引擎
            openEngine(){
                this.fetch('/home/app/engine/switch?engine=1').then(res=>{
                    if(res&&res.data.data){
                        this.getData();
                    }
                })
            },
            //获取函数
            selectFun(classId){
                if(classId){
                    //选择函数
                    this.fetch('/home/app/engine/schedule/classId/'+classId).then(res=>{
                        if(res&&res.data.data&&res.data.code){
                            this.funData = res.data.data;
                            if(!this.funData.length){
                                this.$Message.warning('该分组下无函数')
                            }
                        }
                    })
                }
                
            },
            //改变状态
            changeStatus(row){
                this.fetch('/home/app/engine/schedule/switch',{
                    status:row.status ? 0 : 1,
                    id:row.id
                }).then(res=>{
                    row.status ? this.$Message.warning('已关闭') : this.$Message.success('已开启');
                    this.getData();
                })
            },
            edit(row){
                this.fetch('/home/app/engine/schedule/id/'+row.id).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.modal = true;
                        let data = res.data.data;
                        this.formItem.classId = data.class_id;
                        this.formItem.functionId = data.function_id;
                        // this.formItem.name = data.name;
                        this.formItem.rule = data.rule;
                        this.formItem.id = data.id;
                        this.type = '0'
                    }
                })
            },
            //删除
            del(row){
                 this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确定删除吗</p>',
                    onOk: () => {
                        this.fetch('/home/app/engine/schedule/delete',{
                            id:row.id
                        }).then(res=>{
                            if(res&&res.data.data&&res.data.code){
                                this.$Message.success('删除成功')
                                this.getData();
                            }
                        })
                    }
                });
            },
			addTask(){
				this.modal = true;
                this.formItem = {
                    classId:'',
                    // name:'',
                    functionId:'',
                    rule:'',
                    
                }
                this.type = '0'
                this.date = {
                    month:'*',
                    week:'*',
                    hour:'*',
                    minute:'*',
                    second:'*',
                    day:'*'
                }
			},
			cancel(){
                this.modal = false;
			},
			sure(){
                if(!this.formItem.classId){
                    this.$Message.warning('请选择分组')
                    return;
                }
                // if(!this.formItem.name){
                //     this.$Message.warning('请填写名称')
                //     return;
                // }
                if(!this.formItem.functionId){
                    this.$Message.warning('请选择函数')
                    return;
                }
                if(this.type == 1){
                    this.formItem.rule = this.date.minute + ' '+this.date.hour+' ' + this.date.day +' '+ this.date.month + ' ' + this.date.week;
                }
                if(!this.formItem.rule){
                    this.$Message.warning('请填写表达式')
                    return;
                }
                this.formItem.status = 1;
                this.fetch('/home/app/engine/schedule/add',this.formItem).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.getData()
                        this.changeStatus({id:res.data.data.id,status:0});
                        this.modal = false;
                    }
                })
			}
		}
	}
</script>
<style>
    
</style>